<script setup>
import { nextTick, ref, reactive } from "vue";
import axios from "axios";

import top from "./component/top.vue";
import bottomLeft from "./component/bottomLeft.vue";
import bottomRight from "./component/bottomRight.vue";

const count = ref(0);
// 顶部步骤条数据
let topArr = reactive([]);

async function getTopArr() {
  let newArr = await axios({
    url: "/api/statusList",
    method: "get",
  });
  topArr.push(...newArr.data.data.list);
}

getTopArr();
// 步骤前进
function countAdd() {
  if (count.value < topArr.length) {
    count.value += 1;
  } else {
    count.value = 0;
  }
}
</script>

<template>
  <div class="component">
    <el-row>
      <el-col :span="24">
        <div class="grid-content top">
          <div class="title">
            项目节点

            <el-button type="primary" text @click="countAdd"
              >步骤前进</el-button
            >
          </div>
          <top :count="count" :arr="topArr" ref="tops"></top>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bottom-left">
          <div class="title">项目概况</div>
          <bottom-left></bottom-left>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bottom-right">
          <div class="title">项目成本</div>
          <bottom-right></bottom-right>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.component {
  .grid-content {
    border-radius: 4px;
    border: #eee solid 1px;
    .title {
      padding: 0.5rem 1rem;
      border-bottom: #eee solid 1px;
      font-weight: bold;
    }
  }
  .top {
  }

  .bottom-left {
    height: 60vh;
  }

  .bottom-right {
    height: 60vh;
  }
}

.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
</style>
